import React from 'react'
import ReactDOM from 'react-dom'
import './index.scss'

const _MOCK_DATA = [
  {
    headImg: '1.gif',
    name: 'normal',
    desc: '对双向算法，此元素不提供额外的嵌入级别。对于内联元素，隐式的重新排序在元素的边界上起作用。',
  },
  {
    headImg: '2.gif',
    name: 'embed',
    desc: '对于内联元素，该值会为双向算法打开一个额外的嵌入级别。嵌入级别的方向是由 direction 属性给出的。',
  },
  {
    headImg: '3.gif',
    name: 'isolate',
    desc: '这个关键字表示计算元素容器的方向时，不考虑这个元素的内容。',
  },
  {
    headImg: '4.gif',
    name: 'bidi-override',
    desc: '对于内联元素，该值会创建一个覆盖；对于块容器元素，该值将为不在另一个块容器元素内的内联级别的后代创建一个覆盖。',
  },
  {
    headImg: '5.gif',
    name: 'isolate-override',
    desc: '这个关键字将 isolate 关键字的隔离行为应用于周围的内容，并将 bidi-override 关键字的覆盖行为应用于内部内容。',
  },
  {
    headImg: '6.gif',
    name: 'plaintext',
    desc: '这个关键字在计算元素方向的时候，不考虑父元素的双向状态，也不考虑 direction 属性的值。',
    // isMe: true,
  },
]

const App = () => (
  <div class='msg-container'>
    <header class='msg-header'>WM11前端技术部</header>
    {_MOCK_DATA.map((i) => (
      <ChatCard {...i} />
    ))}
  </div>
)

const ChatCard = ({ headImg, name, desc, isMe = false }) => (
  <section class={`msg-item ${isMe ? 'isMe' : ''}`}>
    <img class='msg-avator' alt={name} src={require(`@/assets/${headImg}`)} />
    <div class='msg-info'>
      <span class='msg-user'>{name}</span>
      <div class='msg-txt'>
        <p style={{ unicodeBidi: 'plaintext' }}>{desc}</p>
      </div>
    </div>
  </section>
)

export default ReactDOM.render(<App />, document.querySelector('#root'))
